<template>
  <div>
    <div>首页</div>
    <p>store中的count:{{ $store.state.count }}</p>
    <p>计算属性:{{ $store.getters.doubleCount }}</p>
    <p>
      <button @click="addCountFn">+10</button>
      <button @click="jianCountFn">-1</button>
      <button @click="addCountAsyncFn">+10异步</button>
      <button @click="jianCountAsyncFn">-1异步</button>
    </p>
    <hr />
    <p>
      store中的user: {{ $store.state.userModule.user.name }}--{{
        $store.state.userModule.user.age
      }}
    </p>
    <p>
      <button @click="addAgeFn">+5同步</button>
      <button @click="addAgeAsyncFn">+5异步</button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(this);
  },
  methods: {
    addCountFn() {
      this.$store.commit("addcount", 10);
    },
    jianCountFn() {
      this.$store.commit("jiancount");
    },
    addCountAsyncFn() {
      this.$store.dispatch("addCountAsync", 10);
    },
    jianCountAsyncFn() {
      this.$store.dispatch("jianCountAsync");
    },
    // 修改子模块user中的数据
    addAgeFn() {
      this.$store.commit("userModule/addAge", 5);
    },
    addAgeAsyncFn() {
      this.$store.dispatch("userModule/AddAgeAsync", 5);
    },
  },
};
</script>
<style scoped>
</style>